<template>
  <div class="">
    <ul class="con">
      <li
        v-for="(item, index) in list"
        :key="index"
        @mouseenter="enterCon(index)"
        :class="{ bg: index == flag }"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["list", "flag"],
  data() {
    return {};
  },
  mounted() {},
  methods: {
    enterCon(index) {
      this.$emit("enterCon", index);
    },
  },
  components: {},
};
</script>

<style lang="scss">
.con {
  width: 200px;
  border: 1px solid #ccc;
  li {
    height: 30px;
  }
  .bg {
    background: olive;
  }
}
</style>
